<template>
  <div class="personal-profile">
    <div class="profile-header">
      <div class="profile-avatar-section">
        <div class="avatar-container">
          <div class="avatar-display" @click="triggerAvatarUpload">
            <img v-if="userProfile.avatar" :src="userProfile.avatar" alt="用户头像" class="avatar-image">
            <div v-else class="avatar-placeholder">
              <i class="fas fa-user"></i>
              <span>{{ userProfile.name?.charAt(0) || 'U' }}</span>
            </div>
            <div class="avatar-overlay">
              <i class="fas fa-camera"></i>
              <span>更换头像</span>
            </div>
          </div>
          <input 
            ref="avatarInput" 
            type="file" 
            accept="image/*" 
            @change="handleAvatarChange"
            style="display: none"
          >
        </div>
        <div class="profile-basic-info">
          <h2>{{ userProfile.name || '未设置姓名' }}</h2>
          <p class="user-title">{{ userProfile.position || '职位待完善' }}</p>
          <p class="user-department">{{ userProfile.department || '部门待完善' }}</p>
        </div>
      </div>
      <div class="profile-actions">
        <button class="btn btn-secondary" @click="resetForm" :disabled="isSaving">
          <i class="fas fa-undo"></i>
          重置
        </button>
        <button class="btn btn-primary" @click="saveProfile" :disabled="isSaving">
          <i class="fas" :class="isSaving ? 'fa-spinner fa-spin' : 'fa-save'"></i>
          {{ isSaving ? '保存中...' : '保存资料' }}
        </button>
      </div>
    </div>

    <div class="profile-content">
      <div class="profile-tabs">
        <button 
          class="tab-button" 
          :class="{ active: activeTab === 'basic' }" 
          @click="activeTab = 'basic'"
        >
          <i class="fas fa-user"></i>
          基本信息
        </button>
        <button 
          class="tab-button" 
          :class="{ active: activeTab === 'security' }" 
          @click="activeTab = 'security'"
        >
          <i class="fas fa-shield-alt"></i>
          账号安全
        </button>
        <button 
          class="tab-button" 
          :class="{ active: activeTab === 'activity' }" 
          @click="activeTab = 'activity'"
        >
          <i class="fas fa-history"></i>
          活动记录
        </button>
      </div>

      <div class="tab-content">
        <!-- 基本信息标签页 -->
        <div v-if="activeTab === 'basic'" class="tab-panel basic-info-panel">
          <div class="panel-header">
            <h3><i class="fas fa-user-edit"></i> 个人基本信息</h3>
            <p>请完善您的个人信息，以便系统更好地为您服务</p>
          </div>
          
          <form @submit.prevent="saveProfile" class="profile-form">
            <div class="form-grid">
              <div class="form-group">
                <label><i class="fas fa-user"></i> 姓名 *</label>
                <input 
                  type="text" 
                  v-model="formData.name" 
                  placeholder="请输入您的姓名"
                  required
                >
              </div>
              
              <div class="form-group">
                <label><i class="fas fa-venus-mars"></i> 性别</label>
                <select v-model="formData.gender">
                  <option value="">请选择性别</option>
                  <option value="男">男</option>
                  <option value="女">女</option>
                </select>
              </div>
              
              <div class="form-group">
                <label><i class="fas fa-mobile-alt"></i> 手机号码 *</label>
                <input 
                  type="tel" 
                  v-model="formData.phone" 
                  placeholder="请输入手机号码"
                  required
                >
              </div>
              
              <div class="form-group">
                <label><i class="fas fa-envelope"></i> 电子邮箱</label>
                <input 
                  type="email" 
                  v-model="formData.email" 
                  placeholder="请输入电子邮箱"
                >
              </div>
              
              <div class="form-group">
                <label><i class="fas fa-building"></i> 所属部门</label>
                <input 
                  type="text" 
                  v-model="formData.department" 
                  placeholder="请输入所属部门"
                >
              </div>
              
              <div class="form-group">
                <label><i class="fas fa-briefcase"></i> 职位</label>
                <input 
                  type="text" 
                  v-model="formData.position" 
                  placeholder="请输入职位"
                >
              </div>
              
              <div class="form-group">
                <label><i class="fas fa-id-card"></i> 员工编号</label>
                <input 
                  type="text" 
                  v-model="formData.employeeNumber" 
                  placeholder="系统自动生成"
                  readonly
                >
              </div>
              
              <div class="form-group">
                <label><i class="fas fa-calendar"></i> 入职日期</label>
                <input 
                  type="date" 
                  v-model="formData.hireDate"
                >
              </div>
            </div>
            
            <div class="form-group full-width">
              <label><i class="fas fa-sticky-note"></i> 个人简介</label>
              <textarea 
                v-model="formData.bio" 
                rows="4" 
                placeholder="请输入个人简介或备注信息..."
              ></textarea>
            </div>
          </form>
        </div>

        <!-- 账号安全标签页 -->
        <div v-if="activeTab === 'security'" class="tab-panel security-panel">
          <div class="panel-header">
            <h3><i class="fas fa-shield-alt"></i> 账号安全设置</h3>
            <p>管理您的登录密码和安全设置</p>
          </div>
          
          <div class="security-sections">
            <div class="security-item">
              <div class="security-info">
                <div class="security-icon">
                  <i class="fas fa-key"></i>
                </div>
                <div class="security-content">
                  <h4>登录密码</h4>
                  <p>定期更换密码有助于保护账号安全</p>
                  <small class="text-muted">上次修改：{{ lastPasswordChange || '从未修改' }}</small>
                </div>
              </div>
              <button 
                class="btn btn-outline-primary" 
                @click="showPasswordModal = true"
                :disabled="isSaving"
              >
                <i class="fas fa-edit"></i>
                修改密码
              </button>
            </div>
            
            <div class="security-item">
              <div class="security-info">
                <div class="security-icon">
                  <i class="fas fa-clock"></i>
                </div>
                <div class="security-content">
                  <h4>登录记录</h4>
                  <p>查看最近的登录活动记录</p>
                  <small class="text-muted">最后登录：{{ userProfile.lastLoginTime || '无记录' }}</small>
                </div>
              </div>
              <button class="btn btn-outline-info" @click="loadLoginHistory">
                <i class="fas fa-history"></i>
                查看记录
              </button>
            </div>
            
            <div class="security-item">
              <div class="security-info">
                <div class="security-icon">
                  <i class="fas fa-user-shield"></i>
                </div>
                <div class="security-content">
                  <h4>账号状态</h4>
                  <p>当前账号状态正常</p>
                  <small class="text-success">
                    <i class="fas fa-check-circle"></i>
                    账号安全等级：良好
                  </small>
                </div>
              </div>
              <button class="btn btn-outline-success" disabled>
                <i class="fas fa-check"></i>
                状态正常
              </button>
            </div>
          </div>
        </div>

        <!-- 活动记录标签页 -->
        <div v-if="activeTab === 'activity'" class="tab-panel activity-panel">
          <div class="panel-header">
            <h3><i class="fas fa-history"></i> 最近活动记录</h3>
            <p>查看您在系统中的操作记录</p>
          </div>
          
          <div class="activity-list">
            <div v-if="activityList.length === 0" class="empty-activity">
              <div class="empty-icon">
                <i class="fas fa-history"></i>
              </div>
              <h4>暂无活动记录</h4>
              <p>您的操作记录将显示在这里</p>
            </div>
            
            <div v-else class="activity-items">
              <div 
                v-for="(activity, index) in activityList" 
                :key="index" 
                class="activity-item"
              >
                <div class="activity-icon">
                  <i class="fas" :class="getActivityIcon(activity.type)"></i>
                </div>
                <div class="activity-content">
                  <h5>{{ activity.title }}</h5>
                  <p>{{ activity.description }}</p>
                  <small class="text-muted">{{ formatDateTime(activity.timestamp) }}</small>
                </div>
                <div class="activity-status">
                  <span class="status-badge" :class="activity.status">
                    {{ activity.statusText }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改密码模态框 -->
    <div v-if="showPasswordModal" class="modal-overlay" @click="closePasswordModal">
      <div class="modal-content password-modal" @click.stop>
        <div class="modal-header">
          <h3><i class="fas fa-key"></i> 修改登录密码</h3>
          <button class="modal-close" @click="closePasswordModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="changePassword" class="password-form">
            <div class="form-group">
              <label><i class="fas fa-lock"></i> 当前密码 *</label>
              <input 
                type="password" 
                v-model="passwordForm.currentPassword" 
                placeholder="请输入当前密码"
                required
              >
            </div>
            <div class="form-group">
              <label><i class="fas fa-key"></i> 新密码 *</label>
              <input 
                type="password" 
                v-model="passwordForm.newPassword" 
                placeholder="请输入新密码（至少6位）"
                minlength="6"
                required
              >
            </div>
            <div class="form-group">
              <label><i class="fas fa-check-circle"></i> 确认新密码 *</label>
              <input 
                type="password" 
                v-model="passwordForm.confirmPassword" 
                placeholder="请再次输入新密码"
                required
              >
            </div>
            <div class="password-tips">
              <h5><i class="fas fa-info-circle"></i> 密码安全提示：</h5>
              <ul>
                <li>密码长度至少6位字符</li>
                <li>建议包含数字、字母和特殊字符</li>
                <li>定期更换密码，提高账号安全性</li>
              </ul>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="closePasswordModal">取消</button>
          <button 
            class="btn btn-primary" 
            @click="changePassword" 
            :disabled="!isPasswordFormValid || isChangingPassword"
          >
            <i class="fas" :class="isChangingPassword ? 'fa-spinner fa-spin' : 'fa-save'"></i>
            {{ isChangingPassword ? '修改中...' : '确认修改' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { api } from '../api/index'
import { useUserStore } from '../stores/user'

// 获取用户store
const userStore = useUserStore()

// 状态管理
const activeTab = ref('basic')
const isSaving = ref(false)
const isChangingPassword = ref(false)
const showPasswordModal = ref(false)
const avatarInput = ref<HTMLInputElement>()
const lastPasswordChange = ref<string>('2024-10-01')

// 用户资料数据
const userProfile = reactive({
  id: '',
  type: '',
  name: '',
  gender: '',
  phone: '',
  email: '',
  department: '',
  position: '',
  employeeNumber: '',
  hireDate: '',
  bio: '',
  avatar: '',
  lastLoginTime: '',
  status: 'active'
})

// 表单数据
const formData = reactive({
  name: '',
  gender: '',
  phone: '',
  email: '',
  department: '',
  position: '',
  employeeNumber: '',
  hireDate: '',
  bio: ''
})

// 密码修改表单
const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 活动记录
const activityList = ref([
  {
    type: 'login',
    title: '登录系统',
    description: '从IP 192.168.1.100 登录系统',
    timestamp: new Date(),
    status: 'success',
    statusText: '成功'
  },
  {
    type: 'profile_update',
    title: '更新资料',
    description: '修改了个人基本信息',
    timestamp: new Date(Date.now() - 86400000),
    status: 'success',
    statusText: '完成'
  }
])

// 计算属性
const isPasswordFormValid = computed(() => {
  return passwordForm.currentPassword && 
         passwordForm.newPassword && 
         passwordForm.confirmPassword &&
         passwordForm.newPassword === passwordForm.confirmPassword &&
         passwordForm.newPassword.length >= 6
})

// 触发头像上传
const triggerAvatarUpload = () => {
  avatarInput.value?.click()
}

// 处理头像文件选择
const handleAvatarChange = async (event: Event) => {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  
  if (!file) return
  
  // 验证文件类型
  if (!file.type.startsWith('image/')) {
    showNotification('请选择图片文件', 'error')
    return
  }
  
  // 验证文件大小（限制2MB）
  if (file.size > 2 * 1024 * 1024) {
    showNotification('图片大小不能超过2MB', 'error')
    return
  }
  
  try {
    // 创建预览
    const reader = new FileReader()
    reader.onload = (e) => {
      userProfile.avatar = e.target?.result as string
    }
    reader.readAsDataURL(file)
    
    // 上传到服务器
    const currentUserId = userStore.userInfo.id?.toString() || userProfile.id
    const currentUserType = userStore.userInfo.role || userProfile.type || 'admin'
    const response = await api.user.uploadAvatar(currentUserId, currentUserType, file)
    
    if (response.status === 'success') {
      userProfile.avatar = response.data.avatar_url
      showNotification('头像上传成功', 'success')
    } else {
      showNotification(response.message || '头像上传失败', 'error')
    }
  } catch (error) {
    console.error('头像上传失败:', error)
    showNotification('头像上传失败，请重试', 'error')
  }
}

// 保存个人资料
const saveProfile = async () => {
  try {
    isSaving.value = true
    
    // 验证必填字段
    if (!formData.name) {
      showNotification('请填写姓名', 'warning')
      return
    }
    
    // 准备提交数据
    const submitData = {
      ...formData,
      type: userProfile.type || 'admin'
    }
    
    // 调用后端API保存
    const currentUserId = userStore.userInfo.id?.toString() || userProfile.id
    const response = await api.user.updateUserProfile(currentUserId, submitData)
    
    if (response.status === 'success') {
      // 更新本地数据
      Object.assign(userProfile, formData)
      showNotification('个人资料保存成功', 'success')
    } else {
      showNotification(response.message || '保存失败', 'error')
    }
  } catch (error) {
    console.error('保存资料失败:', error)
    showNotification('保存失败，请检查网络连接后重试', 'error')
  } finally {
    isSaving.value = false
  }
}

// 重置表单
const resetForm = () => {
  Object.assign(formData, {
    name: userProfile.name,
    gender: userProfile.gender,
    phone: userProfile.phone,
    email: userProfile.email,
    department: userProfile.department,
    position: userProfile.position,
    employeeNumber: userProfile.employeeNumber,
    hireDate: userProfile.hireDate,
    bio: userProfile.bio
  })
  showNotification('表单已重置', 'info')
}

// 修改密码
const changePassword = async () => {
  if (!isPasswordFormValid.value) {
    showNotification('请正确填写所有密码字段', 'warning')
    return
  }
  
  try {
    isChangingPassword.value = true
    
    // 调用后端API修改密码
    const currentUserId = userStore.userInfo.id?.toString() || userProfile.id
    const response = await api.user.changePassword(currentUserId, passwordForm)
    
    if (response.status === 'success') {
      showNotification('密码修改成功', 'success')
      closePasswordModal()
      lastPasswordChange.value = new Date().toISOString().split('T')[0] || '2024-10-01'
    } else {
      showNotification(response.message || '密码修改失败', 'error')
    }
  } catch (error) {
    console.error('密码修改失败:', error)
    showNotification('密码修改失败，请检查当前密码是否正确', 'error')
  } finally {
    isChangingPassword.value = false
  }
}

// 关闭密码修改模态框
const closePasswordModal = () => {
  showPasswordModal.value = false
  Object.assign(passwordForm, {
    currentPassword: '',
    newPassword: '',
    confirmPassword: ''
  })
}

// 加载登录历史
const loadLoginHistory = () => {
  showNotification('登录记录功能开发中', 'info')
}

// 获取活动图标
const getActivityIcon = (type: string) => {
  const icons: Record<string, string> = {
    login: 'fa-sign-in-alt',
    logout: 'fa-sign-out-alt',
    profile_update: 'fa-user-edit',
    password_change: 'fa-key',
    evaluation: 'fa-clipboard-check',
    hazard: 'fa-exclamation-triangle'
  }
  return icons[type] || 'fa-info-circle'
}

// 格式化日期时间
const formatDateTime = (date: Date) => {
  return new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  }).format(new Date(date))
}

// 显示通知
const showNotification = (message: string, type: 'success' | 'error' | 'warning' | 'info' = 'info') => {
  // 创建通知元素
  const notification = document.createElement('div')
  notification.className = `notification ${type}`
  notification.textContent = message
  
  // 设置样式
  const colors = {
    success: '#27ae60',
    error: '#e74c3c', 
    warning: '#f39c12',
    info: '#3498db'
  }
  
  notification.style.cssText = `
    position: fixed;
    top: 90px;
    right: 20px;
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    z-index: 2001;
    border-left: 4px solid ${colors[type]};
    animation: slideIn 0.3s ease;
    max-width: 300px;
    font-size: 14px;
  `
  
  document.body.appendChild(notification)
  
  // 3秒后自动移除
  setTimeout(() => {
    if (notification.parentNode) {
      notification.remove()
    }
  }, 3000)
}

// 初始化数据
const initializeProfile = async () => {
  try {
    // 从userStore获取当前登录用户信息
    const currentUserId = userStore.userInfo.id?.toString() || '1'
    const currentUserType = userStore.userInfo.role || 'admin'
    
    // 从后端加载用户数据
    const response = await api.user.getUserProfile(currentUserId, currentUserType)
    
    if (response.status === 'success') {
      const profileData = response.data
      
      // 更新用户资料
      Object.assign(userProfile, {
        id: profileData.id,
        type: currentUserType,
        name: profileData.name,
        avatar: profileData.avatar,
        bio: profileData.bio,
        lastLoginTime: profileData.last_login_time || profileData.created_at,
        ...profileData
      })
      
      // 复制到表单数据
      Object.assign(formData, {
        name: profileData.name,
        gender: profileData.gender,
        phone: profileData.phone || profileData.contact,
        email: profileData.email,
        department: profileData.department,
        position: profileData.position,
        employeeNumber: profileData.employee_number || profileData.safety_number,
        hireDate: profileData.hire_date,
        bio: profileData.bio
      })
    } else {
      // 使用模拟数据作为fallback
      Object.assign(userProfile, {
        id: '1',
        type: 'admin',
        name: '张三',
        gender: '男',
        phone: '138****1234',
        email: 'zhangsan@example.com',
        department: '安全部',
        position: '安全工程师',
        employeeNumber: 'EMP20241001-001',
        hireDate: '2023-03-15',
        bio: '负责矿山安全评估和隐患排查工作',
        lastLoginTime: '2024-10-13 10:30:00'
      })
      
      // 复制到表单数据
      Object.assign(formData, {
        name: userProfile.name,
        gender: userProfile.gender,
        phone: userProfile.phone,
        email: userProfile.email,
        department: userProfile.department,
        position: userProfile.position,
        employeeNumber: userProfile.employeeNumber,
        hireDate: userProfile.hireDate,
        bio: userProfile.bio
      })
    }
  } catch (error) {
    console.error('加载用户资料失败:', error)
    showNotification('加载用户资料失败，使用默认数据', 'warning')
    
    // 使用模拟数据作为fallback
    Object.assign(userProfile, {
      id: '1',
      type: 'admin',
      name: '张三',
      gender: '男',
      phone: '138****1234',
      email: 'zhangsan@example.com',
      department: '安全部',
      position: '安全工程师',
      employeeNumber: 'EMP20241001-001',
      hireDate: '2023-03-15',
      bio: '负责矿山安全评估和隐患排查工作',
      lastLoginTime: '2024-10-13 10:30:00'
    })
    
    // 复制到表单数据
    Object.assign(formData, {
      name: userProfile.name,
      gender: userProfile.gender,
      phone: userProfile.phone,
      email: userProfile.email,
      department: userProfile.department,
      position: userProfile.position,
      employeeNumber: userProfile.employeeNumber,
      hireDate: userProfile.hireDate,
      bio: userProfile.bio
    })
  }
}

// 组件挂载时初始化
onMounted(() => {
  initializeProfile()
})
</script>

<style scoped>
.personal-profile {
  background: #f8f9fa;
  min-height: 100vh;
  padding: 20px;
}

/* 页面头部 */
.profile-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 25px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.profile-avatar-section {
  display: flex;
  align-items: center;
  gap: 25px;
}

.avatar-container {
  position: relative;
  cursor: pointer;
}

.avatar-display {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.avatar-display:hover {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.6);
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.avatar-placeholder span {
  font-size: 32px;
  font-weight: bold;
  margin-top: 5px;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 12px;
  text-align: center;
}

.avatar-display:hover .avatar-overlay {
  opacity: 1;
}

.avatar-overlay i {
  font-size: 20px;
  margin-bottom: 5px;
}

.profile-basic-info h2 {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 600;
}

.user-title {
  margin: 0 0 5px 0;
  font-size: 16px;
  opacity: 0.9;
}

.user-department {
  margin: 0;
  font-size: 14px;
  opacity: 0.8;
}

.profile-actions {
  display: flex;
  gap: 12px;
}

/* 主要内容区域 */
.profile-content {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.profile-tabs {
  display: flex;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.tab-button {
  flex: 1;
  padding: 20px;
  border: none;
  background: none;
  color: #6c757d;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-bottom: 3px solid transparent;
}

.tab-button:hover {
  color: #495057;
  background: #e9ecef;
}

.tab-button.active {
  color: #667eea;
  background: white;
  border-bottom-color: #667eea;
}

.tab-content {
  padding: 0;
}

.tab-panel {
  padding: 30px;
}

/* 面板头部 */
.panel-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f2f5;
}

.panel-header h3 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-header p {
  margin: 0;
  color: #6c757d;
  font-size: 14px;
}

/* 表单样式 */
.profile-form {
  max-width: 100%;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  margin-bottom: 25px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  margin-bottom: 8px;
  font-weight: 600;
  color: #495057;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.3s ease;
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group input:read-only {
  background: #f8f9fa;
  color: #6c757d;
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

/* 安全设置样式 */
.security-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.security-item:hover {
  background: #f1f3f4;
  border-color: #dee2e6;
}

.security-info {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.security-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.security-content h4 {
  margin: 0 0 5px 0;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
}

.security-content p {
  margin: 0 0 5px 0;
  color: #6c757d;
  font-size: 14px;
}

.security-content small {
  font-size: 12px;
}

/* 活动记录样式 */
.activity-list {
  max-height: 600px;
  overflow-y: auto;
}

.empty-activity {
  text-align: center;
  padding: 60px 20px;
  color: #6c757d;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.5;
}

.empty-activity h4 {
  margin: 0 0 10px 0;
  color: #495057;
}

.empty-activity p {
  margin: 0;
  font-size: 14px;
}

.activity-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #667eea;
  transition: all 0.3s ease;
}

.activity-item:hover {
  background: #f1f3f4;
  transform: translateX(5px);
}

.activity-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.activity-content {
  flex: 1;
}

.activity-content h5 {
  margin: 0 0 5px 0;
  color: #2c3e50;
  font-size: 15px;
  font-weight: 600;
}

.activity-content p {
  margin: 0 0 5px 0;
  color: #6c757d;
  font-size: 13px;
}

.activity-content small {
  font-size: 11px;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.status-badge.success {
  background: #d4edda;
  color: #155724;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(3px);
}

.modal-content {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid #e9ecef;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-close {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.modal-body {
  padding: 25px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 25px;
  border-top: 1px solid #e9ecef;
  background: #f8f9fa;
}

/* 密码表单样式 */
.password-form .form-group {
  margin-bottom: 20px;
}

.password-tips {
  margin-top: 20px;
  padding: 15px;
  background: #e7f3ff;
  border-radius: 8px;
  border-left: 4px solid #007bff;
}

.password-tips h5 {
  margin: 0 0 10px 0;
  color: #007bff;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.password-tips ul {
  margin: 0;
  padding-left: 20px;
}

.password-tips li {
  color: #495057;
  font-size: 13px;
  margin-bottom: 5px;
}

/* 工具类 */
.text-muted { color: #6c757d !important; }
.text-success { color: #28a745 !important; }

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-header {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .profile-avatar-section {
    flex-direction: column;
    gap: 15px;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .security-item {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .activity-item {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  
  .modal-content {
    width: 95%;
  }
}
</style>
